<script setup>
import { ref } from 'vue';
import Detail from './Detail.vue';
import List from './List.vue';
const isLoggedIn = ref(true);

const user = ref({
  username: "张三",
  gender: "男",
  job: "前端开发工程师",
  sign: "这个人很懒，什么都没有留下",
})

const activeIndex = ref("1")
const myArticleList = ref([
  {title: 'Vue3.0新特性使用攻略', time: "2024-10-28"},
  {title: 'Vue3.0脚手架使用详解', time: "2024-10-25"},
  {title: 'ElementPlus框架应用场景', time: "2024-10-17"},
  {title: '5款独立开发者必备神器', time: "2024-10-12"}
])

const articleList = ref(["001"])

const courseList = ref([
  //{title: "零基础学JavaScript", price: 49},
  //{title: "Vue.js从入门到实战", price: 199},
  //{title: "深入浅出状态管理", price: 29},
  //{title: "说透大厂前端项目面试题", price: 69}
])

const productList = ref([
  { type: '徽章', name: 'IT社区文创 ：「代码新秀闪耀」 荣誉徽章', price: 29, stock: 30, img: '/images/product01.png' },
  { type: '帆布包', name: '【it社区文创】「极简主义」帆布包', price: 79, stock: 60, img: '/images/product02.png' },
  { type: 'T恤', name: '蓝字魔法，解锁IT新风尚——百搭T恤衫', price: 12, stock: 100, img: '/images/product03.png' },
  { type: 'U盘', name: 'IT达人必备：128GB紫色技术社区U盘', price: 39, stock: 80, img: '/images/product04.png' },
  { type: '笔记本', name: '高端皮质IT笔记本，简约设计尽显专业气质', price: 29, stock: 30, img: '/images/product05.png' },
  { type: '鼠标垫', name: '文创字母鼠标垫「IT技术社区专属」', price: 79, stock: 60, img: '/images/product06.png' },
  { type: '马克杯', name: '白色陶瓷杯，简约IT标志，时尚办公新选择', price: 12, stock: 100, img: '/images/product07.png' },
  { type: '贴纸', name: '科技与创意碰撞——IT社区蓝色徽章文创', price: 39, stock: 80, img: '/images/product08.png' },
])
</script>

<template>
  <div id="app">
    <el-container>
      <!-- <el-header>
        <el-row>
          <el-col :span="4" style="display: flex; flex-direction: row; align-items: center">
            <img src="/images/logo.png" style="height: 60px" />
            <h2 style="padding-left: 4px">技术社区</h2>
          </el-col>
          <el-col :span="8">
            <el-menu :default-active="activeIndex" mode="horizontal" style="border-bottom: none !important">
              <el-menu-item index="1">首页</el-menu-item>
              <el-menu-item index="2">文章</el-menu-item>
              <el-menu-item index="3">课程</el-menu-item>
              <el-menu-item index="4">商城</el-menu-item>
            </el-menu>
          </el-col>
          <el-col :span="8" style="height: 60px; line-height: 60px" class="hidden-only-sm">
            <el-input placeholder="请输入关键字" />
          </el-col>
          <el-col :span="4" style="text-align: right; height: 60px; line-height: 60px"
            class="hidden-only-sm;">
            <img src="/images/avatar.png" style="width: 30px; height: 30px; border-radius: 50%" />
            <el-link type="primary" style="padding-left: 4px">{{ user.username }}</el-link>
          </el-col>
        </el-row>
      </el-header> -->
      <el-container>
        <el-aside>
          <el-card style="margin: 20px;">
            <el-menu :default-active="activeIndex">
              <el-menu-item index="1"><i class="fas fa-home"></i>个人主页</el-menu-item>
              <el-menu-item index="2"><i class="fas fa-user"></i>个人资料</el-menu-item>
              <el-menu-item index="3"><i class="fas fa-cog"></i>账号设置</el-menu-item>
              <el-menu-item index="4"><i class="fas fa-bell"></i>消息设置</el-menu-item>
              <el-menu-item index="5"><i class="fas fa-database"></i>标签管理</el-menu-item>
            </el-menu>
          </el-card>
        </el-aside>
        <el-main>
          <el-card>
            <el-row>
              <el-col :span="4">
                <img src="/images/avatar.png" style="width: 100px; height: 100px; border-radius: 50%" />
              </el-col>
              <el-col :span="20">
                <h2>{{ user.username }}</h2>
                <span>性别：{{ user.gender }}</span><br />
                <span>签名档：{{ user.sign }}</span><br />
                <router-link to="/person/list">我的关注</router-link>
                <router-link to="/person/list" style="margin-left: 20px;">我的粉丝</router-link>
              </el-col>
            </el-row>
          </el-card>
          <el-card>
            <el-tabs style="text-align: left">
              <el-tab-pane label="我发布的文章">
                <div v-if="myArticleList.length>0">列表数据
                  <ul>
                    <li v-for="myarticle in myArticleList" :key="myarticle.id">
                      {{ myarticle.title }}<br />{{ myarticle.time }}
                    </li>
                  </ul>
                </div>
                <el-empty v-else description="暂无数据"/>
              </el-tab-pane>
              <el-tab-pane label="我收藏的文章">
                <div v-if="articleList.length>0">列表数据
                  <ul>
                    <li v-for="article in articleList" :key="article.id">
                      {{ article.title }}
                    </li>
                  </ul>
                </div>
                <el-empty v-else description="暂无数据"/>
              </el-tab-pane>
              <el-tab-pane label="我收藏的课程">
                <div v-if="courseList.length>0">列表数据
                  <ul>
                    <li v-for="course in courseList" :key="course.id">
                      {{ course.title }}
                    </li>
                  </ul>
                </div>
                <el-empty v-else description="暂无数据"/>
              </el-tab-pane>
              <el-tab-pane label="我收藏的商品">
                <div v-if="productList.length>0">列表数据
                  <ul>
                    <li v-for="product in productList" :key="product.id">
                      {{ product.type }}<br />价格：{{ product.price }}
                    </li>
                  </ul>
                </div>
                <el-empty v-else description="暂无数据"/>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-main>
      </el-container>
      <!-- <el-footer>
        <el-row>
          <el-col :xs="24" :lg="8" style="display: flex; flex-direction: row; align-items: center">
            <div>
              <img src="/images/logo.png" style="height: 100px" />
            </div>
            <div>
              <h2 style="padding-left: 4px">技术社区</h2>
              <p style="padding-left: 4px">
                致力构建一个专业的IT技术交流社区
              </p>
            </div>
          </el-col>
          <el-col :xs="24" :lg="10" style="
              display: flex;
              flex-direction: column;
              text-align: center;
              padding-top: 3%;
            ">
            <div style="
                display: flex;
                flex-direction: row;
                gap: 70px;
                padding-left: 15px;
              ">
              <el-link type="primary">首页</el-link>
              <el-link type="primary">咨询</el-link>
              <el-link type="primary">课程</el-link>
              <el-link type="primary">商城</el-link>
            </div>
            <div style="display: flex; flex-direction: row; gap: 43px">
              <el-link type="primary">关于我们</el-link>
              <el-link type="primary">使用手册</el-link>
              <el-link type="primary">隐私条款</el-link>
              <el-link type="primary">建议反馈</el-link>
            </div>
          </el-col>
          <el-col :xs="24" :lg="6">
            <div>
              <h2>联系我们</h2>
              <p>电话：123456789</p>
              <p>邮箱：software@develop.com</p>
            </div>
          </el-col>
          <el-col :xs="24" :lg="24" style="background-color: deepskyblue">
            <p style="text-align: center">软件开发工作室版权所有</p>
          </el-col>
        </el-row>
      </el-footer> -->
    </el-container>
  </div>
</template>

<style scoped>
.el-carousel__container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>